<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>用户管理</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport"
	content="width=device-width, initial-scale=1, maximum-scale=1">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="format-detection" content="telephone=no">
<link rel="stylesheet" href="./css/x-admin.css" media="all">
</head>
<body>
	<div class="x-nav">
		<span class="layui-breadcrumb"> <a><cite>首页></cite></a> <a><cite>用户管理></cite></a>
			<a><cite>用户管理</cite></a>
		</span> <a class="layui-btn layui-btn-small"
			style="line-height: 1.6em; margin-top: 3px; float: right"
			href="javascript:location.replace(location.href);" title="刷新"><i
			class="layui-icon" style="line-height: 30px">ဂ</i></a>
	</div>
	<div class="x-body">
		
		<xblock>
		<button class="layui-btn"
			onclick="member_add('添加用户','UserAdd.jsp','600','500')">
			<i class="layui-icon">&#xe608;</i>添加
		</button>
		
		<form action="UsersServlet" method="post" style="display: inline-block">
			<div class="layui-input-inline">
				<input class="layui-input" type="text" class="form-control" name="keywords" id="keywords"
					value="${keywords}" placeholder="请输入要查询的用户名"> 
					<input type="hidden" name="op" value="queryByPage"> 
			</div>
			<div class="layui-input-inline" style="width: 50px">
				<button class="layui-btn" type="submit" lay-submit=""
					lay-filter="sreach">
					<i class="layui-icon">&#xe615;</i>
				</button>
			</div>
		</form>
		
		<span class="x-right" style="line-height: 40px">共有数据：<span
			class="layui-badge">${pd1.totalCount}</span> 条
		</span>
		
		</xblock>
		<table class="layui-table">
			<thead>
				<tr>
					<th><input type="checkbox" name="" value=""></th>
					<th>用户编号</th>
					<th>员工编号</th>
					<th>员工名</th>
					<th>用户名</th>
					<th>状态</th>
					<th>操作</th>
				</tr>
			</thead>
			<tbody>
				<c:if test="${pd1==null}">
					<!-- c:redirect 跳转到 EmpServlet -->
					<c:redirect url=" UsersServlet?op=queryByPage"></c:redirect>
				</c:if>
				<c:if test="${pd1!=null }">
					<c:forEach items="${pd1.data }" var="users">
						<tr>
							<td><input type="checkbox" value="1" name=""></td>
							<td>${users.userNo}</td>
							<td>${users.empNo}</td>
							<td>${users.empName}</td>
							<td>${users.userName}</td>
							<td class="td-status"><c:if test="${users.userState==1}">
									<span class="layui-btn layui-btn-normal ">已启用</span>
								</c:if> <c:if test="${users.userState==0}">
									<span class="layui-btn layui-btn-disabled "> 已禁用 </span>
								</c:if></td>
							<td class="td-manage"><c:if test="${users.userState==0}">
									<a style="text-decoration: none"
										onclick="member_start(this,${users.userNo})"
										href="javascript:;" title="启用"> <i class="layui-icon">&#xe601;</i></a>
								</c:if> 
								<c:if test="${users.userState==1}">
									<a style="text-decoration: none"
										onclick="member_stop(this,${users.userNo})"
										href="javascript:;" title="禁用"> <i class="layui-icon">&#xe601;</i></a>
								</c:if> 
								<a title="初始化" href="javascript:;" 
										onclick="init_pwd(this,${users.userNo})"
								class="ml-5" style="text-decoration: none"> <i
									class="layui-icon">&#xe642;</i>
								</a>
							</td>
						</tr>
					</c:forEach>
				</c:if>
			</tbody>
		</table>
		<div id="pagediv" style="text-align: center"></div>
	</div>
	<script src="./lib/layui/layui.js" charset="utf-8"></script>
	<script src="./js/x-layui.js" charset="utf-8"></script>
		<!-- Bootstrap core JavaScript
    ================================================== -->
	<!--3 - js/jquery-2.0.3.js -->
	<script src="js/jquery-2.0.3.js"></script>
	<!--4 - ootstrap.min.js -->
	<script src="dist/js/bootstrap.min.js"></script>

	<!-- 引入layui.js文件 -->
	<script src="layui/layui.js" charset="utf-8"></script>
	<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->
	<script>
		layui.use(['laypage', 'layer'], function(){
		  var laypage = layui.laypage
		  ,layer = layui.layer;
		  
		  //完整功能
		  laypage.render({//分页的导航
		    elem: 'pagediv'//颜色
		    ,count: ${pd1.totalCount}//总页数
		 	,curr:${pd1.page}//当前页面
		 	,limit:${pd1.pageSize}//一页有多少内容
		    ,layout: ['prev', 'page', 'next']
		    ,jump: function(obj,first){
		      //首次不执行
		      if(!first){
		    	  location.href="UsersServlet?op=queryByPage&page="+obj.curr+"&pageSize="+obj.limit;
		      }
		    }
		  });
		});

		//批量删除提交
		function delAll() {
			layer.confirm('确认要删除吗？', {
				icon : 3,
				title : '提示信息'
			}, function(index) {
				//捉到所有被选中的，发异步进行删除
				layer.msg('删除成功', {
					icon : 1
				});
			});
		}
		/*用户-添加*/
		function member_add(title, url, w, h) {
			x_admin_show(title, url, w, h);
		}
		/*用户-查看*/
		function member_show(title, url, id, w, h) {
			x_admin_show(title, url, w, h);
		}


		/*用户-停用*/
		function member_stop(obj, id) {
			layer.confirm('确认要禁用吗？',function(index) {
				//发异步把用户状态进行更改
				$(obj)
						.parents("tr")
						.find(".td-manage")
						.prepend(
								'<a style="text-decoration:none" onClick="member_start(this,id)"  title="启用"><i class="layui-icon">&#xe62f;</i></a>');
					ajaxStop(id);
					$(obj)
					.parents("tr")
					.find(".td-status")
					.html(
							'<span class="layui-btn layui-btn-disabled">已禁用</span>');
				$(obj).remove();
				
				layer.msg('已禁用!', {
					icon : 5,
					time : 1000
				});
				
			}); 
		}
		function ajaxStop(id){
			//AJAX
			$.ajax({
				//key:value
				url : "UsersServlet?op=upd",//地址
				type : "get",//类型
				data : {
					userNo : id,
					userState : 0
				},//传值
				success : function(data) {
					console.log(data)
				},//回调函数
				dataType : "json"
			});
		}									
		/*用户-启用*/
		function member_start(obj, id) {
			layer.confirm('确认要启用吗？',function(index) {
				//发异步把用户状态进行更改
				$(obj)
						.parents("tr")
						.find(".td-manage")
						.prepend(
								'<a style="text-decoration:none" onClick="member_stop(this,id)"  title="停用"><i class="layui-icon">&#xe601;</i></a>');
				//location.href = "CourseEvaServlet?op=upd&evalNo="+id+"&evalState=1";
			 		ajaxStart(id);
					$(obj)
					.parents("tr")
					.find(".td-status")
					.html(
							'<span class="layui-btn layui-btn-normal">已启用</span>');
				$(obj).remove();
				
				layer.msg('已启用!', {
					icon : 6,
					time : 1000
				}); 
				
			});
		}
		function ajaxStart(id){
			//AJAX
			$.ajax({
				//key:value
				url : "UsersServlet?op=upd",//地址
				type : "get",//类型
				data : {
					userNo : id,
					userState : 1
				},//传值
				success : function(data) {
					console.log(data)
				},//回调函数
				dataType : "json"
			});
		}
		
		
		function init_pwd(obj,id){
			layer.confirm('确认要初始化'+id+'的密码吗？',{
				icon : 3,
				title : '提示信息'
			},function(index){
				$.ajax({
					url : "UsersServlet",
					type : "get",
					data : {
						userNo : id,
						op : "initpwd"
					},//传值
					success : function(data) {
						if(data == "初始化成功"){
							layer.msg(data,{icon:1,time:1000});
		                    setTimeout(function(){
		                    	location.replace(location.href);
		                    },1000);
		                    return false;
						}else{
							layer.msg(data,{icon:5,time:2000});
		                    return false;
						}
					},//回调函数
					dataType : "json"
				});
			});
		}
	</script>

</body>
</html>
